<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简易选项卡</title>
    <style>
      body,
      ul,
      li {
        margin: 0;
        padding: 0;
      }
      body {
        font: 12px/1.5 Tahoma;
      }
      #outer {
        width: 450px;
        margin: 10px auto;
      }
      #tab {
        overflow: hidden;
        zoom: 1;
        background: #000;
        border: 1px solid #000;
      }
      #tab li {
        float: left;
        color: #fff;
        height: 30px;
        cursor: pointer;
        line-height: 30px;
        list-style-type: none;
        padding: 0 20px;
      }
      #tab li.active {
        color: #000;
        background: #ccc;
      }
      #content {
        border: 1px solid #000;
        border-top-width: 0;
      }
      #content ul {
        line-height: 25px;
        display: none;
        margin: 0 30px;
        padding: 10px 0;
      }
      #content ul.show {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="outer"></div>
    <script>
      let outer = document.getElementById("outer");
      let tabObj = [
        {
          title: "第一课",
          content: [
            "网页特效原理分析",
            "响应用户操作",
            "提示框效果",
            "事件驱动",
            "事件驱动",
            "元素属性操作",
            "动手编写第一个JS特效",
            "引入函数",
            "网页换肤效果",
            "展开/收缩播放列表效果"
          ]
        },
        {
          title: "第二课",
          content: [
            "改变网页背景颜色",
            "函数传参",
            "高重用性函数的编写",
            "126邮箱全选效果",
            "循环及遍历操作",
            "动手编写第一个JS特效",
            "调试器的简单使用",
            "典型循环的构成",
            "展开/for循环配合if判断",
            "innerHTML的使用",
            "戛纳印象效果",
            "数组",
            "字符串连接"
          ]
        },
        {
          title: "第三课",
          content: [
            "JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源",
            "JavaScript出现的位置、优缺点",
            "变量、类型、typeof、数据类型转换、变量作用域",
            "闭包：什么是闭包、简单应用、闭包缺点",
            "循环及遍历操作",
            "运算符：算术、赋值、关系、逻辑、其他运算符",
            "调试器的简单使用",
            "程序流程控制：判断、循环、跳出",
            "展开/命名规范：命名规范及必要性、匈牙利命名法",
            "innerHTML的使用",
            "函数详解：函数构成、调用、事件、传参数、可变参、返回值",
            "数组",
            "定时器的使用：setInterval、setTimeout"
          ]
        }
      ];
      
      function renderTab(tabObj) {
        let tabTitleHtml = "";
        let tabContentHtml = "";

        tabObj.forEach(function(item) {
          tabTitleHtml += `<li>${item.title}</li>`;
          let contentLi = "";
          let contentArray = item.content;
          contentArray.forEach(function(el) {
            contentLi += `<li>${el}</li>`;
          });
          tabContentHtml += `<ul>${contentLi}</ul>`;
        });

        let tabHtml = `
      <ul id="tab">
        ${tabTitleHtml}
      </ul>
      <div id="content">
        ${tabContentHtml}
        <!--html-->
      </div>
      `;
        outer.innerHTML = tabHtml;
        document.querySelector("#content ul").classList.add("show");
        document.querySelector('#tab li').classList.add('active')
      }

      function handleTab() {
        let tabs = document.querySelectorAll("#tab li");
        let contents = document.querySelectorAll("#content ul");

        for (let i = 0; i < tabs.length; i++) {
          let tab = tabs[i];
          tab.onmouseenter = function() {
            clearClass(tabs, "active");
            tab.classList.add("active");

            clearClass(contents, "show");
            contents[i].classList.add("show");
          };
        }
      }

      function clearClass(elements, removeClassName) {
        for (let i = 0; i < elements.length; i++) {
          elements[i].classList.remove(removeClassName);
        }
      }

      renderTab(tabObj)
      handleTab()
    </script>
  </body>
</html>
